<template>
  <div id="app">
    <Toheader />
    <Tobanner :bannerList="bannerList" />
    <Tosearch />
    <Tomain
      :goodsList="goodsList"
      :navList="navList"
    />
    <Toad />
    <Tofooter />
  </div>
</template>
<script>
import axios from 'axios'
import Toheader from './components/Toheader.vue'
import Tobanner from './components/Tobanner.vue'
import Tosearch from './components/Tosearch.vue'
import Tomain from './components/Tomain.vue'
import Toad from './components/Toad.vue'
import Tofooter from './components/Tofooter.vue'
export default {
  name: 'ComponentName',
  data() {
    return {
      bannerList: [],
      goodsList: [],
      navList: [],
    }
  },
  computed: {},
  methods: {},
  components: { Toheader, Tobanner, Tosearch, Tomain, Toad, Tofooter },
  filters: {},
  watch: {},
  created() {
    axios
      .get('http://cba.itlike.com/public/index.php?s=/api/page/detail')
      .then((res) => {
        const data = res.data.data.pageData.items
        this.navList = data[3].data // 轮播图
        this.bannerList = data[1].data // 商品
        console.log(this.bannerList)
        this.goodsList = data[6].data
      })
      .catch((reeor) => {
        console.log(reeor)
      })
  },
  mounted() {},
}
</script>
<style lang="less" scoped>
#app {
  padding-top: 23.4666vw;
  background-color: #fafafa;
  padding-bottom: 20vw;
  height: calc(100vh - 12vw);
  overflow: auto;
}
.commonMoney {
  color: red;
  font-size: 3.2vw;
}
.commonMoney span {
  font-size: 3.7333vw;
  color: red;
}
</style>
